/**
    2023/3/1
    电商首页（分类的显示 - Tabs组件 + 后台递归数据）

    2023/3/2
    添加推荐、特价模块显示（根据数据库中的字段标识【000000 每一位代表一个状态】。取具体哪一位的固定条数的数据显示）
    如：
    100000 表示推荐
    110000 表示推荐、特价
    111000 表示推荐、特价、专场  （后面3位预留）

    2023/3/3
    添加了头、导航、底部等组件及样式
*/
<template>
    <div>
        <!--头部区域-->
        <PageHeader />

        <!--导航区域-->
        <PageNav />

        <!--内容区域-->
        <div class="list">
            <div class="box">
                <div class="detail">
                    <el-row>
                        <el-col :span="6">
                            <!--左边显示分类-->
                            <div class="left-box">
                                <el-tabs :tab-position="tabPosition" @tab-click="handleClick" style="height: 200px;">
                                    <!-- <el-tab-pane label="用户管理">用户管理</el-tab-pane>
                                    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
                                    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                                    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->

                                    <el-tab-pane v-for="(item, index) in tabData" :key="index" :label="item.name">
                                        <div v-for="(sub, index2) in item.items" :key="index2">
                                            <span @click="eventClicke(sub.name)">{{ sub.name }}</span>
                                        </div>
                                    </el-tab-pane>

                                </el-tabs>
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <!--右边显示分类-->
                            <!--推荐模块-->
                            <div style="padding:20px;">
                                <div style="margin-bottom:10px;">
                                    <el-row>
                                        <el-col :span="12"
                                            style="text-align:left; font-size: 30px; font-weight: 600;">推荐模块</el-col>
                                        <el-col :span="12" style="text-align:right;">
                                            <router-link to="/product"> more&gt;&gt; </router-link>
                                            <!-- <span @click="eventTo">more &gt;&gt;</span> -->
                                        </el-col>
                                    </el-row>
                                </div>
                                <div>
                                    <el-row>
                                        <el-col :span="6" v-for="(o, index) in recommendData" :key="index">
                                            <el-card :body-style="{ padding: '0px' }">
                                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                                    class="image">
                                                <div style="padding: 14px;">
                                                    <span>{{ o.name }}</span>
                                                    <div class="bottom clearfix">
                                                        <el-button type="text" class="button">操作按钮</el-button>
                                                    </div>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>


                            <!--特价模块-->
                            <div style="padding:20px;">
                                <div style="margin-bottom:10px;">
                                    <el-row>
                                        <el-col :span="12"
                                            style="text-align:left; font-size: 30px; font-weight: 600;">特价模块</el-col>
                                        <el-col :span="12" style="text-align:right;">more&gt;&gt;</el-col>
                                    </el-row>
                                </div>
                                <div>
                                    <el-row>
                                        <el-col :span="6" v-for="(o, index) in specialData" :key="index">
                                            <el-card :body-style="{ padding: '0px' }">
                                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                                    class="image">
                                                <div style="padding: 14px;">
                                                    <span>{{ o.name }}</span>
                                                    <div class="bottom clearfix">
                                                        <el-button type="text" class="button">操作按钮</el-button>
                                                    </div>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>

        <!--底部区域-->
        <PageFooter />
    </div>
</template>

<script>
//引入组件页面
import PageNav from '@/components/PageNav.vue'
import PageHeader from '@/components/PageHeader.vue'
import PageFooter from '@/components/PageFooter.vue'

export default {
    components: {
        //声明刚才我们引入的页面，是一个组件
        PageNav, PageHeader, PageFooter
    },
    data() {
        return {
            tabPosition: 'left',
            tabData: [
                {
                    name: '用户管理', items: [
                        { name: '用户1' },
                        { name: '用户2' },
                        { name: '用户3' },
                    ]
                },
                {
                    name: '商品管理', items: [
                        { name: '商品1' },
                        { name: '商品2' },
                        { name: '商品3' },
                    ]
                },
                {
                    name: '分类管理', items: [
                        { name: '分类1' },
                        { name: '分类2' },
                        { name: '分类3' },
                    ]
                },
            ],
            recommendData: [], //推荐数据
            specialData: [], //特价数据  
        };
    },
    mounted() {
        this.loadData()
    },
    methods: {
        //more跳转
        eventTo() {
            //let row=[{name:'abc'},{name:'efg'}]
            //this.$router.push('product?id=1')
            //this.$router.push(   {   path:'/product', query:{   id:1,name:'abc'  }   }   )
            //this.$router.push( { name:'product', params:{ id:1,row:row } } )
        },
        //加载首页特价和推荐产品的数据
        loadData() {
            let url = 'http://localhost:5217/product/index'
            this.$http.get(url).then(res => {
                this.recommendData = res.data.data.recommend
                this.specialData = res.data.data.special
            })
        },
        handleClick(tab, event) {
            console.log(tab, event);
            //this.$message.error(tab.label)
        },
        eventClicke(name) {
            this.$message.error(name)
        }
    }
}
</script>

<style>
img {
    width: 100px;
}
</style> 